<script setup lang="ts">
import { lat2str, lng2str } from '@/geom/great-circle'
import type { AuxPoint } from './core'
import { notify } from '@/widgets'
const props = defineProps<{ item: AuxPoint }>()

const lng = lng2str(props.item.point.lng)
const lat = lat2str(props.item.point.lat)

async function copyLocation() {
  const { lng, lat } = props.item.point
  const str = `${lng},${lat}`
  await navigator.clipboard.writeText(str)
  notify.success({ content: `[${props.item.name}]经纬度复制到剪贴板` })
}
</script>
<template>
  <div class="aux-point-info pane-block">
    <div class="row">
      <div class="col-4em">名称</div>
      <div class="col">{{ item.name }}</div>
    </div>
    <div class="row">
      <div class="col-4em">经度</div>
      <div class="col">
        {{ lng }}
      </div>
    </div>
    <div class="row">
      <div class="col-4em">纬度</div>
      <div class="col">
        {{ lat }}
      </div>
    </div>
    <div class="row" style="margin-top: 4em">
      <div class="map-hover" @click="copyLocation">[复制]</div>
    </div>
  </div>
</template>
